<template>
<view>
<!--pages/hotelFilter/hotelFilter.wxml-->
<!--<import src="template.wxml"></import>-->

<view class="filterContent">
     <block data-type="template" data-is="settingItem" data-attr="caption:'酒店位置',value:'',needIcon:false">
     <view class="settingItem">
          <text class="caption">{{'关于UU酒店'}}</text>
          <text class="value">{{''}}</text>
          <image v-if="true" src="/static/res/images/ic_right_arrow.png" mode="widthFix" class="icon"></image>
     </view>
</block>
     <block data-type="template" data-is="settingItem" data-attr="caption:'行政区域 ',value:'南山区 ',needIcon:true">
     <view class="settingItem">
          <text class="caption">{{'关于UU酒店'}}</text>
          <text class="value">{{''}}</text>
          <image v-if="true" src="/static/res/images/ic_right_arrow.png" mode="widthFix" class="icon"></image>
     </view>
</block>
     <block data-type="template" data-is="settingItem" data-attr="caption:'商圈 ',value:'xx商圈 ',needIcon:true">
     <view class="settingItem">
          <text class="caption">{{'关于UU酒店'}}</text>
          <text class="value">{{''}}</text>
          <image v-if="true" src="/static/res/images/ic_right_arrow.png" mode="widthFix" class="icon"></image>
     </view>
</block>
     <block data-type="template" data-is="settingItem" data-attr="caption:'地铁 ',value:'深大地铁站 ',needIcon:true">
     <view class="settingItem">
          <text class="caption">{{'关于UU酒店'}}</text>
          <text class="value">{{''}}</text>
          <image v-if="true" src="/static/res/images/ic_right_arrow.png" mode="widthFix" class="icon"></image>
     </view>
</block>
</view>

<view class="filterMenu">
     <text class="clear">清除筛选</text>
     <text class="confirm">确定</text>
</view>
</view>
</template>

<script>

export default {
  data() {
    return {};
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {}
};
</script>
<style>
/* pages/hotelFilter/hotelFilter.wxss */

Page {
     width: 100%;
     height: 100%;
     background: #f2f2f2;
     display: flex;
     flex-direction: column;
}

.filterContent {
     width: 100%;
     margin-top: 20rpx;
     display: flex;
     flex-direction: column;
}

.settingItem {
     display: flex;
     width: 100%;
     box-sizing: border-box;
     flex-direction: row;
     background: white;
     border-bottom: #dedede solid 1px;
     padding: 30rpx 26rpx;
     align-items: center;
}

.settingItem .caption, .settingItem .value {
     font-size: 30rpx;
     color: #333;
}

.settingItem .value {
     flex: 1;
     text-align: right;
}

.settingItem .icon {
     width: 28rpx;
     margin-left: 10rpx;
}

.filterMenu {
     width: 100%;
     height: 100rpx;
     display: flex;
     flex-direction: row;
     margin-top: 60rpx;
}

.filterMenu .clear, .filterMenu .confirm {
     flex: 1;
     height: 100rpx;
     line-height: 100rpx;
     font-size: 28rpx;
     box-sizing: border-box;
     margin: 30rpx;
     border-radius: 16rpx;
     text-align: center;
}

.filterMenu .clear {
     color: #333;
     border: 1rpx solid #ff6f06;
     background: white;
}

.filterMenu .confirm {
     color: white;
     background: #fd7a33;
}

</style>